import "./page-header.scss";
import { useRouter } from "vue-router";
export default defineComponent({
	props: {
		title: {
			type: String
		},
		backText: {
			type: String
		},
		showBackText: {
			type: Boolean,
			default: true
		},
		back: {
			type: Boolean,
			default: true
		}
	},
	setup(props, { slots }) {
		const router = useRouter();
		const back = () => {
			router.back();
		};
		return () => {
			return (
				<div class="page-header flex justify-between  pt-2 pb-2 ">
					<div class="flex title-left items-center">
						{props.back && window.frames.length == parent.frames.length ? (
							<div onClick={() => back()} class="left-back-btn flex items-center cursor-pointer ">
								<i class="back-icon iconfont iconbx-arrow-back cursor-pointer"></i>
								<div v-show={props.showBackText} class="page-header-title">
									{props.backText || "返回"}
								</div>
							</div>
						) : (
							<div></div>
						)}
						<div class="page-header-title flex items-center">
							{props.back ? null : <div class="title-left-line" style="margin-top: 4px;height: 20px;"></div>}
							{slots.default ? slots.default?.() : props.title}
						</div>
					</div>
					<div class="flex items-center ">{slots.operate?.()}</div>
				</div>
			);
		};
	}
});
